<template>
  <el-row :gutter="20" class="product-list">
    <el-col :span="8" v-for="product in products" :key="product.id">
      <el-card :body-style="{ padding: '20px' }" class="product-card">
        <div class="image-container">
          <img :src="product.image" alt="Product Image" class="product-image" />
        </div>
        <h3 class="product-name">{{ product.name }}</h3>
        <p class="product-price">价格: {{ product.price }} 元</p>
        <router-link :to="`/products/${product.id}`" class="product-detail-link">查看详情</router-link>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import iPhoneImage from '../assets/iPhone16.jpg';
import oppoImage from '../assets/oppofindx8.png';
import samsungImage from '../assets/Samsung_GALAXYS_24.jpg';
import vivoImage from '../assets/vivoX200.jpg';
import nubiaImage from '../assets/nubia Z70 Ultra.jpg';
import xiaomiImage from '../assets/XIAOMI 15PRO.png';

export default {
  data() {
    return {
      products: [
        { id: 1, name: 'iPhone 16', price: 5999, image: iPhoneImage },
        { id: 2, name: 'OPPO Find X8', price: 4999, image: oppoImage },
        { id: 3, name: 'Samsung Galaxy S24', price: 6999, image: samsungImage },
        { id: 4, name: 'vivo X200', price: 4699, image: vivoImage },
        { id: 5, name: 'nubia Z70 Ultra', price: 4799, image: nubiaImage },
        { id: 6, name: 'XIAOMI 15PRO', price: 3999, image: xiaomiImage },
      ],
    };
  },
};
</script>

<style>
.product-list {
  margin: 20px;
}

.product-card {
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: scale(1.05);
}

.image-container {
  width: 100%;
  height: 180px; /* 统一高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9; /* 背景颜色避免图片空白 */
}

.product-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 确保图片不变形 */
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  color: black;
  margin-top: 10px;
}

.product-price {
  font-size: 16px;
  color: black;
  margin: 10px 0;
}

.product-detail-link {
  color: #409eff;
  text-decoration: none;
}

.product-detail-link:hover {
  text-decoration: underline;
}
</style>
